
<!-- 我 -->
<template>
  <div id="barbox"
       style="width: 100%;height: 500px;"></div>
</template>

<script>
import {
  getSegmentationList
} from '@/api/dashboard/absentHistoryController'
import {
  barOption
} from './chartsoption'
import { calculateDay } from "@/utils/dateutils"
export default {
  name: "xgybarchart",
  props: ['date', 'isInSchool'],
  data () {
    return {
      mychart: "",
      x: [],
      y: [],
      locked: false,
      day: ''
    }
  },
  watch: {
    date: function () {
      this.changeData()
    }
  },
  methods: {
    async changeData () {


      if (!this.locked) {
        this.day = calculateDay(this.date)
        this.locked = !this.locked
        this.that_day = this.day
        getSegmentationList(this.that_day, this.isInSchool).then((result) => {

          let data = result.msg
          console.log(data);
          this.x = []
          this.y = []
          for (let i = this.that_day; i <= this.that_day + 23; i++) {
            var day1 = new Date();
            day1.setDate(day1.getDate() - i);
            var d1 = day1.getDate()
            this.x.push(d1)
            this.y.push(data[i - this.that_day].count)
          }
          barOption.xAxis.data = this.x.reverse()
          barOption.series[0].data = this.y.reverse()
          if (this.$store.state.isInSchool) {
            barOption.title.text = "全校不在校学生比较柱状图"
          }
          else barOption.title.text = "全校在校学生比较柱状图"
          let optionbar = barOption
          this.myChart.setOption(optionbar);

        }).catch(error => {
        })



        this.locked = !this.locked
      }
    }

  },
  async mounted () {
    this.myChart = this.$echarts.init(document.getElementById('barbox'));
    await this.changeData()
    // 使用刚指定的配置项和数据显示图表。
    setInterval(() => {
      this.myChart.resize();
    }, 100);

  },
}
</script>

<style scoped>
</style>
